import { Chart } from '@antv/g2';
import { useEffect, useRef } from 'react';
import {mockBobble} from '@/utils/base/mock'

export default function BubbleChart() {
  const container = useRef(null);
  const chart = useRef(null);

  useEffect(() => {
    if (!chart.current) {
      chart.current = renderBarChart(container.current,mockBobble);
    }
  }, []);

  function renderBarChart(container,mockBobble) {
    const chart = new Chart({
      container,
      autoFit: true,
      });

   chart
  .point()  // 绘制散点图
  .data(mockBobble.data)
  .encode('x', 'GDP')  // 设置x轴数据绑定
  .encode('y', 'carbonEmission')  // 设置y轴数据绑定
  .encode('size', 'values')  // 设置点大小数据绑定
  .encode('shape', 'point')  // 设置点形状数据绑定
  .scale('x', { nice: true })  // 设置x轴比例尺
  .scale('y', { nice: true, domainMax: 165, zero: true })  // 设置y轴比例尺
  .scale('size', { range: [10, 40] })  // 设置点大小比例尺
  .style('stroke', '#1890ff')  // 设置点颜色
  .style('fillOpacity', 0.3)  // 设置点透明度
  .style('fill', '#1890ff')  // 设置点填充颜色
  .axis({
      x: {
        title: '',
        // titlePosition: 'b',
        // titleSpacing: -50
      },
      y: {
        title: '',
        // titlePosition: 't',
        // titleSpacing: 0
      }
  })
  .tooltip({
    title: (d) => {
      return `${mockBobble.head.tooltip.name} ${d.name}`;
    },
    items: [{
        channel: 'y',
        name: '碳排放强度：',
        color:'',
        valueFormatter:(d) => {
         return `${d}${mockBobble.head.yUnit}`;
        }
    },
    {
      channel: 'x',
      color: '',
      valueFormatter:(d) => {
        return `${d}${mockBobble.head.xUnit}`;
       }
    }
  ],

  })
  .label({
    text: 'name',  // 设置标签文本内容
    position: 'inside',  // 设置标签位置
    fill: '#1890ff',  // 设置标签文本颜色
    stroke: '#fff',  // 设置标签文本边框颜色
  })
  .legend('size', false);  // 设置点大小图例

chart
  .lineY()
  .data([50])
  // 绘制竖直线
  .style('stroke', '#000')
  .style('strokeOpacity', 0.45)
  .style('lineDash', [3, 3])
  .label({
    text: '中位线',  // 设置标签文本内容
    position: 'left',  // 设置标签位置
    textBaseline: 'bottom',  // 设置标签文本基线
    fill: '#000',  // 设置标签文本颜色
    fillOpacity: 0.45,  // 设置标签透明度
    background: true,  // 设置标签背景
    backgroundFill: '#000',  // 设置标签背景颜色
    backgroundOpacity: 0.15,  // 设置标签背景透明度
  });

chart
  .lineX()
  .data([65])
  // 绘制水平线
  .style('stroke', '#000')
  .style('strokeOpacity', 0.45)
  .style('lineDash', [3, 3])
  .label({
    text: '中位线',  // 设置标签文本内容
    position: 'top-left',  // 设置标签位置
    textBaseline: 'bottom',  // 设置标签文本基线
    fill: '#000',  // 设置标签文本颜色
    fillOpacity: 0.45,  // 设置标签透明度
    background: true,  // 设置标签背景
    backgroundFill: '#000',  // 设置标签背景颜色
    backgroundOpacity: 0.15,  // 设置标签背景透明度
  });
chart.render();  // 渲染图表
return chart;
};
  return (
    <div>
      <div ref={container} style={{ height: '350px'}}></div>
      {/* <button onClick={() => updateBarChart(chart.current)}>Update Data</button> */}
    </div>
  );
}
